<template>
    <div>
        <el-card>
            <CategorySelector></CategorySelector>
        </el-card>
        <el-card style="margin-top: 20px;">
            <SpuList v-if="showStatus === ShowStatus.SPU_LIST" @setShowStatus="setShowStatus" @setSpu="setSpu" />
            <SpuForm v-else-if="showStatus === ShowStatus.SPU_FORM" @setShowStatus="setShowStatus" :spu="spu" />
            <SkuForm v-else @setShowStatus="setShowStatus" />
        </el-card>
    </div>
</template>
  
<script lang="ts">
export default {
    name: 'Spu',
}
</script>
  
<script lang="ts" setup>


import { ref } from 'vue';
import { ShowStatus } from './types'
import SpuList from './components/SpuList.vue'
import SpuForm from './components/SpuForm.vue'
import SkuForm from './components/SkuForm.vue'
import type { SpuModel } from '@/api/product/model/spuModel';

// 标识显示个组件的变量
const showStatus = ref<ShowStatus>(ShowStatus.SPU_LIST)

// 更新showStatus的函数
const setShowStatus = (status: ShowStatus) => {
    showStatus.value = status
}


//定义用于传递spu对象的ref对象
const spu = ref<SpuModel>({
    category3Id: undefined,
    description: '',
    spuName: '',
    tmId: undefined,
    spuImageList: [],
    spuSaleAttrList: []
})
//定义设置新的spu的函数
const setSpu = (newSpu: SpuModel) => {
    spu.value = newSpu
}
</script>
  
<style lang="scss" scoped></style>